<template>
	<view class="mine-pages-phone" v-if="isLoad">
		<view class="flex-center flex-column">
			<view class="f-md-title c-black" style="margin-top: 50rpx;">请输入手机号</view>
			<view class="f-caption c-caption">您暂未绑定手机号，快来绑定吧</view>
			<view class="flex-between mt-lg" style="width:630rpx">
				<view class="confirm-btn sm radius-16">
					<input v-model="subForm.phone" type="number"
						class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
						placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
				</view>
				<view @tap="submit(1)" class="send-btn flex-center f-sm-title c-base radius-16"
					:style="{background:primaryColor}">
					{{authTime>0?`(${authTime}s)`:'发送'}}
				</view>
			</view>
			<view class="confirm-btn radius-16">
				<input v-model="subForm.short_code" type="number" maxlength="6"
					class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" placeholder-class="c-placeholder"
					:placeholder="rule[1].errorMsg" />
			</view>

			<view class="mt-lg"></view>

			<view @tap="submit" class="confirm-btn flex-center f-sm-title text-bold c-base radius-16"
				:style="{background:primaryColor,opacity:subForm.short_code.length > 0 ? 1 : 0.5}">确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				authTime: 0,
				timer: null,
				subForm: {
					phone: '',
					short_code: ''
				},
				rule: [{
					name: "phone",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}, {
					name: "short_code",
					checkType: "isNotNull",
					errorMsg: "请输入短信验证码",
					regText: "短信验证码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			pageArr: state => state.config.pageArr,
			loginPage: state => state.user.loginPage,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad(options) {
			this.options = options
			let {
				isGzhLogin
			} = this
			let {
				id: uid = 0
			} = this.userInfo
			let {
				forcetype = 0
			} = this.options
			let time = isGzhLogin && !uid && forcetype == 1 ? 1000 : 0
			setTimeout(() => {
				this.initIndex()
			}, time)
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif
					this.timer && clearInterval(this.timer)
				},
				methods: {
					...mapActions(['getUserInfo']),
					...mapMutations(['updateUserItem']),
					async initIndex() {
						let {
							forcetype = 0
						} = this.options
						if (forcetype == 1) {
							await this.getUserInfo()
						}
						let {
							phone
						} = this.userInfo
						if (phone) {
							let {
								pageArr,
								loginPage
							} = this
							console.log(loginPage, "===========loginPage")
							let url = loginPage || `/pages/service`
							let split_url = url.split('?')[0]
							let isReLaunch = forcetype == 1 || pageArr.includes(split_url)
							let openType = isReLaunch ? `reLaunch` : `navigateBack`
							this.$util.goUrl({
								url: isReLaunch ? url : 1,
								openType
							})
							this.$util.hideAll()
							return
						}
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						uni.setNavigationBarTitle({
							title: '绑定手机号'
						})
						this.$util.hideAll()
						this.isLoad = true
					},
					initRefresh() {
						this.initIndex()
					},
					//表单验证
					validate(param, subType) {
						let validate = new this.$util.Validate();
						this.rule.map(item => {
							let {
								name,
							} = item
							if (name == 'short_code' && subType == 1) return
							validate.add(param[name], item)
						})
						let message = validate.start();
						return message;
					},
					async submit(subType = 0) {
						let {
							authTime
						} = this
						if (authTime && subType == 1) return
						let param = this.$util.deepCopy(this.subForm)
						let msg = this.validate(param, subType);
						if (msg) {
							this.$util.showToast({
								title: msg
							})
							return
						}
						if (this.lockTap) return
						this.lockTap = true
						this.$util.showLoading()
						try {
							let methodModel = subType === 1 ? 'sendShortMsg' : 'bindUserPhone'
							if (subType == 1) {
								delete param.short_code
							}
							await this.$api.user[methodModel](param)
							this.$util.showToast({
								title: subType == 1 ? '发送成功' : '绑定成功'
							})
							this.$util.hideAll()
							this.lockTap = false
							if (subType == 1) {
								this.subForm.short_code = ''
								let time = 60
								this.timer = setInterval(() => {
									if (time === 0) {
										clearInterval(this.timer)
										return
									}
									time--
									this.authTime = time
								}, 1000)
								return
							}
							await this.getUserInfo()
							this.timer && clearInterval(this.timer)
							setTimeout(() => {
								let {
									loginPage,
									pageArr
								} = this
								let url = loginPage || `/pages/service`
								// console.log(this.loginPage, loginPage, "====loginPage phone-page")
								let split_url = url.split('?')[0]
								let isReLaunch = pageArr.includes(split_url)
								let openType = isReLaunch ? `reLaunch` : `navigateBack`
								this.$util.goUrl({
									url: isReLaunch ? url : 1,
									openType
								})
							}, 1000)
						} catch (e) {
							setTimeout(() => {
								this.lockTap = false
								this.$util.hideAll()
							}, 2000)
						}

					}
				}
		}
</script>


<style lang="scss">
	page {
		background: #fff;
	}

	.mine-pages-phone {
		.title {
			font-size: 54rpx;
			margin: 80rpx 0;

		}

		.confirm-btn {
			width: 630rpx;
			height: 110rpx;
			background: #F7F7F7;
			margin-top: 40rpx;

			.item-input {
				height: 110rpx;
			}
		}

		.confirm-btn.sm {
			width: 460rpx;
		}

		.send-btn {
			width: 150rpx;
			height: 110rpx;
			margin-top: 40rpx;
		}
	}
</style>